<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="description" content="">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="author" content="">
    <meta name="keywords" content=""/>
    <title>老虎机</title>
    <link rel="stylesheet" type="text/css" href="/game/css/base.css">
    <link rel="stylesheet" type="text/css" href="/game/css/style.css">
    <script src="/game/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
    <script type="text/javascript" src="/game/playstyle/Tiger/js/jquery.slotmachine.js"></script>
</head>
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $(function() {
        var machine1 = $("#machine1").slotMachine({  //第一个老虎机设置
            active: 0, //初始化时显示第几张图案
            delay: 500 //延迟
        });

        var machine2 = $("#machine2").slotMachine({
            active: 0,
            delay: 500
        });

        var machine3 = $("#machine3").slotMachine({
            active: 0,
            delay: 500
        });
        $("#slotMachineButton1").click(function() { //开始抽奖
            $.ajax({
                url: '/game/run',
                type: "post",
                data:null,
                dataType: "json",
                // dataType: "text",
                timeout: 20000,
                cache: false,
                beforeSend: function(){// 提交之前
                },
                error: function(){//出错

                },
                success: function(res){//成功
                    if(res.info!=undefined&&res.info=='error'){
                        alert(res.msg);
                        return;
                    }
                    machine1.shuffle(3,res.color[0],1); //调用第一个老虎机
                    setTimeout(function() { //500秒后调用第二个老虎机
                        machine2.shuffle(3,res.color[1],2);
                    }, 500);
                    setTimeout(function() { //1000秒后调用第三个老虎机
                        machine3.shuffle(3,res.color[2],3);
                    }, 1000);
                    setTimeout(function() { //1000秒后调用第三个老虎机
                        if(res == '积分不足'){
                            alert(res);
                        }else{
                            if(res.prize_id){
                                alert('恭喜您获得奖品：'+res.game_prize.name);
                            }else{
                                alert('非常遗憾');
                            }
                        }
                    }, 2200);
                }
            });
        })
    });
</script>
<style type="text/css">
    .slotMachineButton {overflow: hidden; display: inline-block; text-align: center; }
    .slotMachineButton { -moz-box-shadow: inset 0px 1px 0px 0px #fce2c1; -webkit-box-shadow: inset 0px 1px 0px 0px #fce2c1; box-shadow: inset 0px 1px 0px 0px #fce2c1; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background: -moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
        background-color: #ffc477; border-radius: 75px; border: 6px solid #eeb44f; display: inline-block; color: #ffffff;text-decoration: none; text-align: center; text-shadow: 1px 1px 0px #cc9f52;cursor: pointer; }
    .slotMachineButton:hover { background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background: -moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
        background-color: #fb9e25; }
    .slotMachineButton:active { position: relative; top: 1px; }
    .slotMachine {overflow: hidden; display: inline-block; text-align: center; border: 5px solid #000; background-color: #ffffff; }
    .noBorder { border: none !important; background: transparent !important; font: 14px arial;}
    .slotMachine .slot {width:100px;height:100px;}

</style>
</head>

<body>
<!--容器-->
<div class="container">
    <!--内容-->
    <div class="content bc_fcdb43">
        <!--游戏、游戏描述-->
        <div>
            <!--游戏详细-->
            <div class="relative">
                <!--背景图-->
                <div class="f_l relative" style="visibility: collapse;">
                    <img src="/game/playstyle/Tiger/img/machine.png" height="auto" width="100%" alt="">
                </div>
                <!--背景图结束-->
                <!--游戏开始-->
                <div class="f_l absolute content">
                	<h1 style="color: #b8632b;font-size: 18px; text-align: center;font-weight: normal;margin-top: 20px;">一分钱玩游戏抽奖品</h1>
                    <div class="tiger_detail_bg">
                        <div class="tiger_detail_game">
                            <div id="machine1" class="slotMachine">
                                <div class="slot slot1"></div>
                                <div class="slot slot2"></div>
                                <div class="slot slot3"></div>
                                <div class="slot slot4"></div>
                            </div>
                            <div id="machine2" class="slotMachine">
                                <div class="slot slot1"></div>
                                <div class="slot slot2"></div>
                                <div class="slot slot3"></div>
                                <div class="slot slot4"></div>
                            </div>
                            <div id="machine3" class="slotMachine">
                                <div class="slot slot1"></div>
                                <div class="slot slot2"></div>
                                <div class="slot slot3"></div>
                                <div class="slot slot4"></div>
                            </div>
                            <div id="slotMachineButton1" class="slotMachineButton">GO</div>
                            <div class="qfd"></div>
                        </div>
                    </div>
                </div>
                <!-- 游戏结束 -->
                <div class="qfd"></div>
            </div>
            <!--游戏详细结束-->
            <!--游戏描述-->
            <div class="activity_tiger_descBg">
                <div class="activity_tiger_desc">
                    <div class="activity_tiger_score">游戏剩余次数：{{$user->game_num}}</div>
                    <div class="activity_tiger_btn" onclick="callpay()">立即充值</div>
                    <div class="activity_tiger_record">
                        {{--<a href="/?act=activity&met=activity_record">我的游戏记录</a>--}}
                    </div>
                </div>
            </div>
            <!--游戏描述结束-->
        </div>
        <!--游戏、游戏描述结束-->
        <!--游戏奖品-->
        <div class="activity_dicing_rule">
            <!--标题-->
            <div class="activity_tiger_title">
                <div class="activity_tiger_titBg">游戏奖品</div>
            </div>
            <!--标题结束-->
            <!--列表-->
            <div class="activity_tiger_list">
                <ul>
                    @if(count($game->gamePrize)>0)
                    @foreach($game->gamePrize as $v)
                        <li>{{$v->name}}</li>
                        @endforeach
                        @endif
                </ul>
            </div>
        </div>
        <!--游戏奖品结束-->
        <!--游戏规则-->
     {{--   <div class="activity_dicing_rule">
            <!--标题-->
            <div class="activity_tiger_title">
                <div class="activity_tiger_titBg">游戏规则</div>
            </div>
            <!--标题结束-->
            <!--列表-->
            <div class="activity_tiger_list">
                <ul>
                    @if(count($game->gamePrize)>0)
                        @foreach($game->gamePrize as $v)
                            <li>{{++$loop->index}}.这里写规则.</li>

                        @endforeach
                    @endif
                </ul>
            </div>
        </div>--}}
        <!--游戏规则结束-->

        <!--中奖名单-->
        <div class="activity_dicing_prize">
            <!--标题-->
            <div class="activity_tiger_title">
                <div class="activity_tiger_titBg">中奖名单</div>
            </div>
            <!--标题结束-->
            <!--列表-->
            <div class="activity_prize_tiger">
                <ul>
                    @foreach($record as $v)
                    <li>
                        <div class="f_l">恭喜{{$v->member->nickname or ''}}</div>
                        <div class="f_l">抽中{{$v->prize_id or ''}}</div>
                        <div class="f_l"></div>
                        <div class="qfd"></div>
                    </li>
                    @endforeach
                </ul>
            </div>
            <!--列表结束-->
        </div>
        <!--中奖名单结束-->

    </div>
    <!--内容结束-->
</div>
<!--容器结束-->
</body>
@include('web.payment.jspayfor',['type'=>1])

</html>